<template>
  <PageLayout page-style="background: #f3f7f8;">
    <view class="search-bar">
      <div class="search-content p-[24rpx]">
        <input type="text" placeholder="请输入关键词" class="search-input" confirm-type="search" v-model="keyword" @confirm="bindSearch" maxlength="20" />
        <view class="search-btn">
          <image class="search-icon" src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201739%402x.png" />
        </view>
      </div>
      <div class="search-btn" @click="bindSearch">搜索</div>
    </view>
    <div class="order-content" style="height: calc(100vh - 120rpx)">
      <div class="total">我的粉丝（{{total}}人）</div>
      <ScrollList :finished="isFinished" :loading="isLoading" :show-empty="isFinished && !list?.length" style="height: calc(100vh - 100rpx); width: calc(100vw - 32rpx)" @load="load" @refresh="reset">
      <div class="" style="display: flex; flex-direction: column; gap: 16rpx">
        <template v-for="product in list" :key="product?.id">
          <div class="order-item">
            <div class="user-time">
              <image alt="用户头像" class="user-avatar" :src="product.avatar" />
              <div class="name">{{product.nickname}}</div>
            </div>
            <div class="btn">
              <view class="follower" v-if="product.isMutualFollow" > 互相关注</view>
              <view class="follower un" v-if="!product.isMutualFollow" @click="bindTap('u', product)"> 回关</view>
            </div>
          </div>
        </template>
      </div>
    </ScrollList>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/components/PageLayout.vue';
import ScrollList from '@/components/scroll-list/scroll-list.vue';
import { usePagination } from '@/hooks/usePagination';
import { followUnfollowDesigner, getFollowerList, likeDesignList, orderDesignList } from "@/api/designUser";
import { onShow } from '@dcloudio/uni-app';
import { shallowRef, unref } from 'vue';
import { useAuthStore } from "@/state/modules/user";
const userDesigner = useAuthStore();
const keyword = shallowRef('');

const bindTap = (type, item) => {
  followUnfollowDesigner({ designerUid: item.uid, type}).then(() => {
    item.isMutualFollow = !item.isMutualFollow;
  })
};

const { list, isLoading, load, reset, isFinished, total } = usePagination(queryProducts);
function queryProducts(page = 1) {
  const data = {
    designerUid: userDesigner.user.id,
    page: page,
    type: -1,
    keyword: keyword.value,
  };
  return getFollowerList(data).then(res => {
    return {
      data: res.data.list,
      total: res.data.total
    }
  })
}
function bindSearch(key) {
  reset();
}

onShow(() => {
  reset();
});
</script>

<style scoped lang="scss">
.search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  //width: 100vw;
  height: 88rpx;
  background: #ffffff;
  box-shadow: 0rpx 1rpx 0rpx 2rpx #e7e7e7;
  padding: 8rpx 16rpx !important;
  box-sizing: content-box;
  position: sticky;
  top: 0rpx;
  display: flex;
  gap: 16rpx;
  padding: 32rpx 16rpx 16rpx;
  overflow: auto;
  z-index: 9;
  .search-content {
    flex: 1;
    width: calc(100% - 48rpx);
    height: 72rpx;
    display: flex;
    align-items: center;
    background: #f3f7f8;
    border-radius: 8rpx;
    box-sizing: border-box;
    padding: 0 16px;
    .search-input {
      flex: 1;
      height: 38rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 38rpx;
    }

    .search-btn {
      .search-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .search-btn {
    height: 42rpx;
    font-weight: 400;
    font-size: 32rpx;
    color: #222222;
    line-height: 42rpx;
    margin-left: 24rpx;
    white-space: nowrap;
  }
}

.order-content {
  background: #ffffff;
  box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 16rpx;
}

.total {
  padding: 24rpx 16rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #6F6F6F;
  line-height: 38rpx;
}
.order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 148rpx;
  padding: 0 20rpx;
  border-bottom: 1rpx solid #E4E4E4;
  .user-time {
    display: flex;
    align-items: center;
    gap: 28rpx;

    .user-avatar {
      width: 92rpx;
      height: 92rpx;
      border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
    .name {
      font-weight: bold;
      font-size: 32rpx;
      color: #222222;
      line-height: 44rpx;
    }
  }
  .btn {
    .follower {
      display: flex;
      justify-content: center;
      width: 130rpx;
      height: 48rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #F25A27;
      font-weight: 400;
      font-size: 28rpx;
      color: #F25A27;
      text-align: center;
      &.un {
        border: 2rpx solid #6F6F6F;
        color: #6F6F6F;
      }
    }
  }
}

</style>
